<?php
/**
 * 1、web应用程序原理
 * 2、获取表单数据
 * 3、请求转发与重定向
 * 4、Session
 * 5、json数据
 * 6、AJAX异步请求
 * 7、web应用程序服务器端小型框架
 * 8、PHP导出导入excel表格文件
 * 9、文件上传与下载
 * 权限管理
 * [{"name":"张三丰","age":22,"phone":"18996157300"},{"name":"张三丰","age":22,"phone":"18996157300"}]
 * 
 * 利用AJAX异步请求加载周末练习的员工列表
 * 
 * 
 * 
 */
/* session_start();
echo session_id();
session_destroy();
$_SESSION["aaa"] = "重庆";

echo "<a href='aa.php'>测试</a>"; */

session_start();//开启session
?>
<!DOCTYPE html>
<html>
    <head>
        <title>登录界面</title>
        <meta charset="utf-8" />
        <link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
        <script type="text/javascript" src="../bootstrap/js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
        <style type="text/css">
            .panel{
	            width: 400px;
            	height: 300px;
            	margin: auto;
            }
            .form-group span{
	            display: block;
            	height: 20px;
            	color: red;
            }
            #d{
	            width: 780px;
            	height: 380px;
            	margin: auto;
            	overflow: hidden;
            }
            #d2{
	            width: 3900px;
            	height: 330px;
            }
            #d2 img{
	            display: block;
            	float: left;
            }
            #d3{
	            width: 780px;
            	height: 50px;
            	background-color: #121112;
            	color: #c8c8c8;
            }
            #d3 span{
	            display: block;
            	width: 156px;
            	height: 50px;
            	float: left;
            	text-align: center;
            	line-height: 50px;
            }
            #d3 span.active{
	            color: #e9c06c;
                background-color: #303030;
            }
        </style>
        <script type="text/javascript">
        $(function() {
			$("#btn-ajax").click(function() {
// 				var xmlHttpRequest = new XMLHttpRequest();
// 				//打开连接
// 				xmlHttpRequest.open("POST", "ajaxTest.handle.php");
// 				//添加事件
// 				xmlHttpRequest.onreadystatechange = function(){
// 				    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
// 				    	//alert("AJAX测试成功");
// 				    	var jsonStr = xmlHttpRequest.responseText;
// 				    	var obj = eval("("+jsonStr+")");
// 				    	alert(obj);
// 					}
// 				};
// 				xmlHttpRequest.send(null);//发送请求

// 			    $.ajax({
// 			        url:"ajaxTest.handle.php",
// 			        type:"get",
// 			        //data:{a:1,b:12},
// 			        dataType:"json",
// 			        success:function(data){
// 			            alert(data);
// 				    }
// 				});

// 				$.get("ajaxTest.handle.php",{},function(data){
// 					alert(data);
// 				},"json");
				$.post("handle/ajaxTest.handle.php",{},function(data){
					alert(data);
	 			},"json");

// 			    $.getJSON("ajaxTest.handle.php",{},function(data){
// 			    	alert(data);
// 				});
				
			});
		    var i = 2;
			setInterval(function(){
			    $("#d2").animate({marginLeft: (1-i)*780+"px"}, 600);
			    $("#d3 span").removeClass("active");
			    $("#d3 span").eq(i-1).addClass("active");
				if(++i == 6) i=1;
			}, 3000);
		});
        </script>
    </head>
    <body>
        <br/><br/><br/><br/>
        <br/><br/><br/>
        <span class="btn btn-info" id="btn-ajax">测试AJAX</span>
        <br/><br/><br/>
        
        <div id="d">
            <div id="d2">
                <img alt="" src="../upload/1.jpg" />
                <img alt="" src="../upload/2.jpg" />
                <img alt="" src="../upload/3.jpg" />
                <img alt="" src="../upload/4.jpg" />
                <img alt="" src="../upload/5.jpg" />
            </div>
            <div id="d3">
                <span class="active">冠军战队限定皮肤</span>
                <span>忍者试炼忍法帖</span>
                <span>公益皮肤科加斯</span>
                <span>7月27日赛程预告</span>
                <span>LPL队服热销中</span>
            </div>
        </div>
        
        
    </body>
</html>